<template>
  <div class="mobileStep6">
    <h1>
      <i class="left"></i>
      <span>我们努力帮你解决难点</span>
      <i class="right"></i>
    </h1>
    <div class="box" v-for="(item, index) in textArr" :key="index">
      <div class="index">
        <span>{{ item.index }}</span>
      </div>
      <h2 class="title">
        {{ item.title }}
        <strong>{{ item.titleStrong }}</strong>
      </h2>
      <ul class="list">
        <li v-for="(m ,i) in item.list" :key="i">
          <h6>
            {{ m.title }}
            <strong v-if="m.titleStrong">{{ m.titleStrong }}</strong>
          </h6>
          <p>{{ m.text }}</p>
        </li>
      </ul>
      <img class="boxBg" :src="item.bgImg" alt="bg">
    </div>
    <img class="backgroundImg" :src="h5_4" alt="bg3">
  </div>
</template>
<script type="text/ecmascript-6">
export default {
  name: 'mobileStep6',
  data () {
    return {
      h5_4: require('@/assets/images/mobile/h5_4.png'),
      textArr: [
        {
          index: 5,
          title: '我们希望你',
          titleStrong: '一键发货',
          bgImg: require('@/assets/images/mobile/box1.png'),
          list: [
            {
              title: '支持智能下单',
              text: '销售平台导出数据无需修改可直接下单发货'
            },
            {
              title: '支持批量发货',
              text: '一键批量发货到销售平台'
            }
          ]
        }
      ]
    }
  }
}
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
.mobileStep6
  transition all 0.6s
  position absolute
  top 0
  left 0
  width 100%
  height 100%
  padding 1rem 1.5rem
  overflow hidden
  box-sizing border-box
  .backgroundImg
    position absolute
    bottom 0
    right 0
    left 0
    margin 0 auto
    min-width 100%
    height 100%
    z-index -1
  h1
    margin-top 0rem
    font-size 1.9rem
    line-height 2.6rem
    color #ffffff
    display flex
    justify-content center
    align-items center
    i
      position relative
      margin 0 1.3rem
      width 0.8rem
      height 1px
      background #ffffff
      &:before
        content ''
        position absolute
        right 0
        top -0.5rem
        width 1.5rem
        height 1px
        background #ffffff
      &:after
        content ''
        position absolute
        right 0
        bottom -0.5rem
        width 1.5rem
        height 1px
        background #ffffff
    .right
      &:before
        left 0
      &:after
        left 0
  .box
    margin-top 1.7rem
    background rgba(255, 255, 255, 1)
    border-radius 0.4rem
    position relative
    overflow hidden
    .boxBg
      position absolute
      right 0
      bottom 0
      width 40%
      opacity 0.12
    .index
      position absolute
      width 7.4rem
      height 7.4rem
      border-radius 50%
      top -3.7rem
      left -3.7rem
      background #B72E5A
      span
        position absolute
        left 65%
        bottom 10%
        font-size 1.9rem
        line-height 2.6rem
        color #ffffff
        font-weight bold
    .title
      height 3.7rem
      line-height 3.7rem
      padding-left 4rem
      font-size 1.3rem
      color #333333
      strong
        font-size 1.7rem
        color #D64A75
        font-weight bold
    .list
      padding 0.9rem 1.3rem
      li
        margin-bottom 0.7rem
        h6
          font-size 1.3rem
          line-height 1.8rem
          color #333333
          margin-bottom 0.4rem
          font-weight bold
          strong
            font-size 1.3rem
            line-height 1.8rem
            color #D64A75
            font-weight bold
        p
          font-size 1.1rem
          line-height 1.5rem
          color #666666
</style>
